<template>
	<div class="Zichan">
		<div class="header">
			<div style="position: relative;">
				<span>我的资产</span>
				<img src="../assets/jiahao.png" style="width: 20px;height: 20px;position: absolute;right: 10px;top: 14px;" />
				<img src="../assets/tubiao_zhexiantu.png" style="width: 20px;height: 20px;position: absolute;right: 40px;top:14px ;" />
			</div>
		</div>
		<div style="width: 100%;height: 60px;"></div>
		<div class="jing" style="position: relative;">
			<div class="first">
				<img v-on:click="select()" src="../assets/jiantouarrow486.png" />
				<!-- <div class="money" v-show="isShow"> -->
				<span class="money" v-on:click.stop="select()" v-show="isShow">{{(xjdata+cxkdata+xykdata+zfbdata+wxdata).toFixed(2)}}</span>
				<!-- </div> -->
				<div class="zichanChoose">
					<img v-show="liShow" src="../assets/地图-气泡_wps图片.png" style="position: absolute;top: 12px;left: -3px;width: 180px;height: 230px;z-index: 999;" />
					<ul v-show="liShow">
						<!-- <li @click="btn0" :class="{active:isActive0}">全选</li> -->
						<li @click="btn1" :class="{active:isActive1}">现金</li>
						<li @click="btn2" :class="{active:isActive2}">储蓄卡</li>
						<li @click="btn3" :class="{active:isActive3}">信用卡</li>
						<li @click="btn4" :class="{active:isActive4}">在线支付</li>
						<li @click="btn5" :class="{active:isActive5}">消费贷</li>
					</ul>
				</div>

				<span class="money" v-show="noShow">******</span>
				<img src="../assets/eye.png" class="eye" v-on:click="showhide()" v-show="isShow" />
				<img src="../assets/biyan.png" class="eye" v-on:click="showhide()" v-show="noShow" />
				<button>转账</button>
			</div>
			<div class="empty"></div>
			<br style="clear:both;" />
			<span class="jingzichan">净资产</span>
			<div style="clear:both;"></div>
		</div>
		<div class="fuzhai">
			<div class="fuzhai_left">
				<span class="fuzhai_1">负债</span>
				<span class="fuzhai_2" v-show="isShow">{{(xfdata).toFixed(2)}}</span>
				<span class="fuzhai_2" v-show="noShow">***</span>
				<div style="clear:both;"></div>
			</div>
			<div class="fuzhai_right">
				
				<span class="" style="float: right;height: 17px;line-height: 17px;" v-show="isShow">{{(xjdata+cxkdata+xykdata+zfbdata+wxdata+xfdata).toFixed(2)}}</span>
				<span class="" style="float: right;font-size: 13px" v-show="noShow">***</span>
				<span class="" style="float: right; font-size: 12px;margin-right: 10px;color: #7E7E7E;">资产</span>
				<div style="clear:both;"></div>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div class="cardbag">
			<span>全部账户(6)</span>
			<img src="../assets/thin-_text_line_.png" @click="btnn" />
			<ul v-show="isModel">
				<li @click="jingdian" :class="{active:isJingdian}">经典</li>
				<li @click="classify" :class="{active:isClassify}">分类</li>
				<li @click="all" :class="{active:isAll}">汇总</li>
				<!-- <li @click="btn3" :class="{active:isActive3}">信用卡</li>
				<li @click="btn4" :class="{active:isActive4}">在线支付</li>
				<li @click="btn5" :class="{active:isActive5}">消费贷</li>
				 -->
			</ul>
			<div style="clear:both;"></div>

             <!-- 汇总模式 -->
			<div class="zizhanAll" v-show="isAll">
				<div class="card" v-show="isActive1" v-on:click="xjshowhide()" style="background-color: #ff6d6d;">
					<span class="cardleft">现金</span>
					<span class="cardright" v-show="isShow" ref="xjval" name="xjval">{{xjnum}}</span>
					<img v-show="!xjShow" src="../assets/shijiantouxia.png" />
					<img v-show="xjShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/Cash">
					<div class="zhankai" v-show="xjShow&&xjShow1">
						<img src="../assets/color_ft_cash.png" />
						<span class="zhankai_left">现金</span>
						<span class="zhankai_right" v-show="isShow">{{xjnum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>


				<div class="card" v-show="isActive2" v-on:click="cxkshowhide()" style="background-color: #ff6ea8;">
					<span class="cardleft">储蓄卡</span>
					<span class="cardright" v-show="isShow">{{cxknum}}</span>
					<img v-show="!cxkShow" src="../assets/shijiantouxia.png" />
					<img v-show="cxkShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/Deposit">
					<div class="zhankai" v-show="cxkShow&&cxkShow1">
						<img src="../assets/color_ft_chuxuka.png" />
						<span class="zhankai_left">储蓄卡</span>
						<span class="zhankai_right" v-show="isShow">{{cxknum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>


				<div class="card" v-show="isActive3" v-on:click="xykshowhide()" style="background-color: #df8ef4;">
					<span class="cardleft">信用卡</span>
					<span class="cardright" v-show="isShow">{{xyknum}}</span>
					<img v-show="!xykShow" src="../assets/shijiantouxia.png" />
					<img v-show="xykShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/Credit">
					<div class="zhankai zhankaibig" v-show="xykShow&&xykShow1">
						<img src="../assets/color_ft_creditcard.png" />
						<span class="zhankai_left">信用卡</span>
						<span class="zhankai_right" v-show="isShow">{{xyknum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
						<br style="clear: both;" />
						<span class="creditlimit">信用卡额度0</span>
					</div>
				</router-link>


				<div class="card" v-show="isActive4" v-on:click="zxshowhide()" style="background-color: #5ace87;">
					<span class="cardleft">在线支付</span>
					<span class="cardright" v-show="isShow">{{(wxdata+zfbdata).toFixed(2)}}</span>
					<!-- <span class="cardright" v-show="isShow">{{zxdata}}</span> -->
					<img v-show="!zxShow" src="../assets/shijiantouxia.png" />
					<img v-show="zxShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/Alipay">
					<div class="zhankai" v-show="zxShow&&zxShow1">
						<img src="../assets/color_ft_zhifubao.png" />
						<span class="zhankai_left">支付宝</span>
						<span class="zhankai_right" v-show="isShow">{{zfbnum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>
				<router-link to="/WechatWallet">
					<div class="zhankai" v-show="zxShow&&zxShow1" style="border-top:1px dashed #bfbfbf;">
						<img src="../assets/color_ft_weixin.png" />
						<span class="zhankai_left">微信</span>
						<span class="zhankai_right" v-show="isShow">{{wxnum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>


				<div class="card" v-show="isActive5" v-on:click="xfdshowhide()" style="background-color: #ff9c60 ;">
					<span class="cardleft">消费贷</span>
					<span class="cardright" v-show="isShow">{{xfnum}}</span>
					<img v-show="!xfdShow" src="../assets/shijiantouxia.png" />
					<img v-show="xfdShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/AntCheckLater">
					<div class="zhankai zhankaibig" v-show="xfdShow&&xfdShow1">
						<img src="../assets/color_ft_zhifuonline.png" />
						<span class="zhankai_left">蚂蚁花呗</span>
						<span class="zhankai_right" v-show="isShow">0.00</span>
						<span class="zhankai_right" v-show="noShow">******</span>
						<br style="clear: both;" />
						<span class="creditlimit">信用卡额度0</span>
					</div>
				</router-link>
			</div>
		    			
			<!-- 分类模式 -->
			<div  v-show="isClassify">
				<div v-show="classifyxj">
				<div class="card" v-show="isActive1" v-on:click="xjshowhide()" style="background-color: #ff6d6d;">
					<span class="cardleft">现金</span>
					<span class="cardright" v-show="isShow">{{xjnum}}</span>
					<img v-show="xjShow" src="../assets/shijiantouxia.png" />
					<img v-show="!xjShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/Cash">
					<div class="zhankai" v-show="!xjShow">
						<img src="../assets/color_ft_cash.png" />
						<span class="zhankai_left">现金</span>
						<span class="zhankai_right" v-show="isShow">{{xjnum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>
				</div>
			
			    
				<div class="card" v-show="isActive2" v-on:click="cxkshowhide()" style="background-color: #ff6ea8;">
					<span class="cardleft">储蓄卡</span>
					<span class="cardright" v-show="isShow">{{cxknum}}</span>
					<img v-show="cxkShow" src="../assets/shijiantouxia.png" />
					<img v-show="!cxkShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/Deposit">
					<div class="zhankai" v-show="!cxkShow">
						<img src="../assets/color_ft_chuxuka.png" />
						<span class="zhankai_left">储蓄卡</span>
						<span class="zhankai_right" v-show="isShow">{{cxknum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>
			
			
				<div class="card" v-show="isActive3" v-on:click="xykshowhide()" style="background-color: #df8ef4;">
					<span class="cardleft">信用卡</span>
					<span class="cardright" v-show="isShow">{{xyknum}}</span>
					<img v-show="xykShow" src="../assets/shijiantouxia.png" />
					<img v-show="!xykShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="Credit">
					<div class="zhankai zhankaibig" v-show="!xykShow">
						<img src="../assets/color_ft_creditcard.png" />
						<span class="zhankai_left">信用卡</span>
						<span class="zhankai_right" v-show="isShow">{{xyknum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
						<br style="clear: both;" />
						<span class="creditlimit">信用卡额度0</span>
					</div>
				</router-link>
			
			
				<div class="card" v-show="isActive4" v-on:click="zxshowhide()" style="background-color: #5ace87;">
					<span class="cardleft">在线支付</span>
					<span class="cardright" v-show="isShow">{{(wxdata+zfbdata).toFixed(2)}}</span>
					<img v-show="zxShow" src="../assets/shijiantouxia.png" />
					<img v-show="!zxShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/Alipay">
					<div class="zhankai" v-show="!zxShow">
						<img src="../assets/color_ft_zhifubao.png" />
						<span class="zhankai_left">支付宝</span>
						<span class="zhankai_right" v-show="isShow">{{zfbnum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>
				<router-link to="/WechatWallet">
					<div class="zhankai" v-show="!zxShow" style="border-top:1px dashed #bfbfbf;">
						<img src="../assets/color_ft_weixin.png" />
						<span class="zhankai_left">微信</span>
						<span class="zhankai_right" v-show="isShow">{{wxnum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
					</div>
				</router-link>
			
			
				<div class="card" v-show="isActive5" v-on:click="xfdshowhide()" style="background-color: #ff9c60 ;">
					<span class="cardleft">消费贷</span>
					<span class="cardright" v-show="isShow">{{xfnum}}</span>
					<img v-show="xfdShow" src="../assets/shijiantouxia.png" />
					<img v-show="!xfdShow" src="../assets/shijiantoushang.png" />
				</div>
				<router-link to="/AntCheckLater">
					<div class="zhankai zhankaibig" v-show="!xfdShow">
						<img src="../assets/color_ft_zhifuonline.png" />
						<span class="zhankai_left">蚂蚁花呗</span>
						<span class="zhankai_right" v-show="isShow">{{xfnum}}</span>
						<span class="zhankai_right" v-show="noShow">******</span>
						<br style="clear: both;" />
						<span class="creditlimit">信用卡额度0</span>
					</div>
				</router-link>
			</div>
		    			
			<!-- 经典模式 -->
			<div class="zizhanAll" v-show="isJingdian">
		    	<router-link to="/Cash">
					<div class="card jingdianmodel" v-show="isActive1" v-on:click="xjshowhide()" style="background-color: #ff9c60 ;">
						<img src="../assets/color_ft_cash.png" style="position: absolute; left: 10px;top: 15px;width: 30px;height: 30px;"/>
						<span class="">现金</span>
						<span class="" v-show="isShow" style="float: right;margin-right: 10px;">{{xjnum}}</span>
					</div>
				</router-link>
		    		    
		    	<router-link to="/Deposit">
					<div class="card jingdianmodel" v-show="isActive2" v-on:click="cxkshowhide()" style="background-color: #df8ef4;;">
						<img src="../assets/color_ft_chuxuka.png" style="position: absolute; left: 10px;top: 15px;width: 30px;height: 30px;"/>
						<span class="">储蓄卡</span>
						<span class="" v-show="isShow" style="float: right;margin-right: 10px;">{{cxknum}}0</span>
					</div>
				</router-link>
		    
		    
		    	<router-link to="/Credit">
					<div class="card jingdianmodel" v-show="isActive3" v-on:click="xykshowhide()" style="background-color: #ff6ea8;">
						<img src="../assets/color_ft_creditcard.png" style="position: absolute; left: 10px;top: 15px;width: 30px;height: 30px;"/>
						<span class="">信用卡</span>
						<span class="" v-show="isShow" style="float: right;margin-right: 10px;">{{xyknum}}</span>
					</div>
				</router-link>
		    
		    
		    	<router-link to="/WechatWallet">
					<div class="card jingdianmodel" v-show="isActive4" v-on:click="zxshowhide()" style="background-color: #5ace87;">
						<img src="../assets/color_ft_weixin.png" style="position: absolute; left: 10px;top: 15px;width: 30px;height: 30px;"/>
						<span class="">微信支付</span>
						<span class="" v-show="isShow" style="float: right;margin-right: 10px;">{{wxnum}}</span>
					</div>
				</router-link>
				
				<router-link to="/Alipay">
					<div class="card jingdianmodel" v-show="isActive4" v-on:click="zxshowhide()" style="background-color: #5555ff;">
						<img src="../assets/color_ft_zhifubao.png" style="position: absolute; left: 10px;top: 15px;width: 30px;height: 30px;"/>
						<span class="">支付宝</span>
						<span class="" v-show="isShow" style="float: right;margin-right: 10px;">{{zfbnum}}</span>
					</div>
				</router-link>
		    
		    
		    	<router-link to="AntCheckLater">
					<div class="card jingdianmodel" v-show="isActive5" v-on:click="xfdshowhide()" style="background-color: #70a25b ;">
						<img src="../assets/color_ft_zhifuonline.png" style="position: absolute; left: 10px;top: 15px;width: 30px;height: 30px;"/>
						<span class="">消费贷</span>
						<span class="" v-show="isShow" style="float: right;margin-right: 10px;">{{xfnum}}</span>
					</div>
				</router-link>
		    	
		    </div>
		</div>

	</div>
</template>

<script>
	import {mapState} from 'vuex'
	
	// console.log(document.getElementsByName('xjval')[0].innerText);
	export default {
		
		data() {
			return {
				isShow: true,
				noShow: false,
				xjShow: false,
				xjShow1: false,
				cxkShow: false,
				cxkShow1: false,
				xykShow: false,
				xykShow1: false,
				zxShow: false,
				zxShow1: false,
				xfdShow: false,
				xfdShow1: false,
				liShow: false,
				isActive0: true,
				isActive1: true,
				isActive2: true,
				isActive3: true,
				isActive4: true,
				isActive5: true,
				isModel: false,
				isJingdian: false,
				isClassify: false,
				classifyxj:true,
				isAll: true,
				xjdata:0.00,
				xjdata1:0.00,
				cxkdata:0.00,
				cxkdata1:0.00,
				xykdata:0.00,
				xykdata1:0.00,
				zfbdata:0.00,
				zfbdata1:0.00,
				wxdata:0.00,
				wxdata1:0.00,
				xfdata:0.00,
				xfdata1:0.00,
				datas: []
			}
		},
		methods: {
			
			showhide() {
				this.isShow = !this.isShow;
				this.noShow = !this.noShow
			},
			xjshowhide() {
				
				this.xjShow = !this.xjShow
				this.xjShow1= !this.xjShow1
				
			},
			cxkshowhide() {
				this.cxkShow = !this.cxkShow
				this.cxkShow1 = !this.cxkShow1
			},
			xykshowhide() {
				this.xykShow = !this.xykShow
				this.xykShow1 = !this.xykShow1
			},
			zxshowhide() {
				this.zxShow = !this.zxShow
				this.zxShow1 = !this.zxShow1
			},
			xfdshowhide() {
				this.xfdShow = !this.xfdShow
				this.xfdShow1 = !this.xfdShow1
			},
			select() {
				this.liShow = !this.liShow
				
			},
			
			btn1() {
				this.isActive1 = !this.isActive1;
				this.xjShow=!this.xjShow
				this.isActive0=false
				
				if(this.isActive1==false){
					this.xjdata=0
				}else{
					this.xjdata=this.xjdata1
				}
				if(this.isActive1==true&&this.isActive2==true&&this.isActive3==true&&this.isActive4==true&&this.isActive5==true){
					this.isActive0 = true;
					this.isActive1 = true;
					this.isActive2 = true;
					this.isActive3 = true;
					this.isActive4 = true;
					this.isActive5 = true;
				}
				
			},
			btn2() {
				this.isActive2 = !this.isActive2
				this.cxkShow=!this.cxkShow
				this.isActive0=false
				if(this.isActive2==false){
					this.cxkdata=0
				}else{
					this.cxkdata=this.cxkdata1
				}
				if(this.isActive1==true&&this.isActive2==true&&this.isActive3==true&&this.isActive4==true&&this.isActive5==true){
					this.isActive0 = true;
					this.isActive1 = true;
					this.isActive2 = true;
					this.isActive3 = true;
					this.isActive4 = true;
					this.isActive5 = true;
				}
			},
			btn3() {
				this.isActive3 = !this.isActive3
				this.isActive0=false
				this.xykShow=!this.xykShow
				if(this.isActive3==false){
					this.xykdata=0
				}else{
					this.xykdata=this.xykdata1
				}
				if(this.isActive1==true&&this.isActive2==true&&this.isActive3==true&&this.isActive4==true&&this.isActive5==true){
					this.isActive0 = true;
					this.isActive1 = true;
					this.isActive2 = true;
					this.isActive3 = true;
					this.isActive4 = true;
					this.isActive5 = true;
				}
			},
			btn4() {
				this.isActive4 = !this.isActive4
				this.isActive0=false
				this.zxShow=!this.zxShow
				if(this.isActive4==false){
					this.zfbdata=0
					this.wxdata=0
				}else{
					this.xfbdata=this.zfbdata1
					this.wxdata=this.wxdata1
				}
				if(this.isActive1==true&&this.isActive2==true&&this.isActive3==true&&this.isActive4==true&&this.isActive5==true){
					this.isActive0 = true;
					this.isActive1 = true;
					this.isActive2 = true;
					this.isActive3 = true;
					this.isActive4 = true;
					this.isActive5 = true;
				}
			},
			btn5() {
				this.isActive5 = !this.isActive5
				this.isActive0=false
				this.xfdShow=!this.xfdShow
				if(this.isActive5==false){
					this.xfdata=0
				}else{
					this.xfdata=this.xfdata1
				}
				if(this.isActive1==true&&this.isActive2==true&&this.isActive3==true&&this.isActive4==true&&this.isActive5==true){
					this.isActive0 = true;
					this.isActive1 = true;
					this.isActive2 = true;
					this.isActive3 = true;
					this.isActive4 = true;
					this.isActive5 = true;
				}
			},
			jingdian() {
				this.isJingdian = !this.isJingdian
				this.isClassify = false
				this.isAll = false
				this.isModel=false
			},
			classify() {
				this.isClassify = !this.isClassify
				this.isJingdian = false
				this.isAll = false
				this.isModel=false
			},
			all() {
				this.isAll = !this.isAll
				this.isClassify = false
				this.isJingdian = false
				this.isModel=false
			},
			btnn() {
				this.isModel = !this.isModel
			}

		},
		
		computed:{
			...mapState(['zichanDatas']),
			//显示data中小数10.00，保留两位
			xjnum:function(){
				return this.xjdata.toFixed(2)
			},
			cxknum:function(){
				return this.cxkdata.toFixed(2)
			},
			xyknum:function(){
				return this.xykdata.toFixed(2)
			},
			zfbnum:function(){
				return this.zfbdata.toFixed(2)
			},
			wxnum:function(){
				return this.wxdata.toFixed(2)
			},
			xfnum:function(){
				return this.xfdata.toFixed(2)
			}
		},
		created(){
			var user_id = localStorage.getItem("user_id");
			this.axios.get("getAccountTotal?user_id=" + user_id).then((res)=>{
				for(var i = 0; i < res.data.length; i++){
					if(res.data[i]._id.type == '收入'){
						if(res.data[i]._id.acc == '现金') this.xjdata += res.data[i].total;
						else if(res.data[i]._id.acc == '储蓄卡') this.cxkdata += res.data[i].total;
						else if(res.data[i]._id.acc == '信用卡') this.xykdata += res.data[i].total;
						else if(res.data[i]._id.acc == '支付宝') this.zfbdata += res.data[i].total;
						else if(res.data[i]._id.acc == '微信') this.wxdata += res.data[i].total;
						else if(res.data[i]._id.acc == '消费贷') this.xfddata += res.data[i].total;
					}else if(res.data[i]._id.type == '支出'){
						if(res.data[i]._id.acc == '现金') this.xjdata -= res.data[i].total;
						else if(res.data[i]._id.acc == '储蓄卡') this.cxkdata -= res.data[i].total;
						else if(res.data[i]._id.acc == '信用卡') this.xykdata -= res.data[i].total;
						else if(res.data[i]._id.acc == '支付宝') this.zfbdata -= res.data[i].total;
						else if(res.data[i]._id.acc == '微信') this.wxdata -= res.data[i].total;
						else if(res.data[i]._id.acc == '消费贷') this.xfddata -= res.data[i].total;
					}
				} 
				this.$store.commit('setZichanDatas', res.data);
				this.datas = res.data;
			});
		}
		

	}
</script>
<style scoped>
	* {
		padding: 0px;
		margin: 0px;
		border: 0px;
	}

	body {
		margin: 0px
	}

	/* .el-select{
		 width: 50px;
		 height: 30px;
	 }
	 .el-input>span{
		 display: none;
	 }
	 .el-select-dropdown{
		 width: 150px;
	 } */
	.active {
		color: #42B983;
	}

	.header {
		height: 50px;
		line-height: 50px;
		width: 100%;
		border-bottom: 0.5px solid #d1d1d1;
		text-align: center;
		font-size: 20px;
		font-weight: 800px;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 9999;

	}

	.header>span {
		position: relative;
		width: 100%;
	}

	.first {
		margin-top: 10px;
		height: ;
	}

	.first>img {
		height: 30px;
		width: 20px;
		margin-left: 10px;
		float: left;
	}

	.first>.money {
		height: 30px;
		line-height: 30px;
		margin-left: 10px;
		float: left;
		font-size: 20px;
	}

	.first>.eye {
		width: 17px;
		height: 15px;
		margin-top: 5px;
		margin-left: 15px;
	}

	.first>button {
		background-color: white;
		width: 55px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #7e7e7e;
		border-radius: 14PX;
		float: right;
		margin-right: 10px;
	}

	.zichanChoose>ul {
		width: 130px;
		list-style-type: none;
		position: absolute;

		border-radius: 12px;
		top: 68px;
		left: 20px;
		text-align: left;
		/* background-image: url(../assets/skin_yusuan_kuang.9.png) ;
		background-size: 100% 100%; */
		z-index: 9999;
		background-color: #ffffff;
	}

	.zichanChoose>ul>li {
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-bottom: #D1D1D1;
	}

	.jing {

		margin-bottom: 10px;
		border-bottom: 1px dashed #d1d1d1;
	}

	.jingzichan {

		float: left;
		height: 30px;
		margin-left: 40px;
		font-size: 12px;
		color: #7e7e7e;
	}

	.fuzhai {
		margin-bottom: 20px;

	}

	.fuzhai_left {
		float: left;
		width: 40%;
		text-align: left;
	}

	.fuzhai_right {
		float: right;
		width: 27%;
		text-align: right;
		margin-right: 10px;
	}

	.fuzhai_1 {

		margin-left: 10px;
		font-size: 12px;
		color: #7e7e7e;
	}

	.fuzhai_2 {

		margin-left: 10px;
	}

	.cardbag {

		background-color: #e1e1e1;
		height: 1000px;
		position: relative;


	}

	.cardbag>ul {
		width: 130px;
		list-style-type: none;
		position: absolute;
		z-index: 9999;
		background-color: #FFFFFF;
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
		right: 10px;
		top: 30px;
	}
	.cardbag>ul>li{
		line-height: 30px;
	}

	.cardbag>span {
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		font-size: 13px;
		height: 25px;
	}

	.cardbag>img {
		height: 20px;
		width: 20px;
		margin-top: 10px;
		margin-right: 10px;
		float: right;
	}

	.card {
		margin: 0 auto;
		width: 95%;
		height: 40px;

		margin-top: 13px;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		position: relative;
	}

	.card>.cardleft {
		float: left;
		margin-left: 10px;
		line-height: 40px;
		color: #FFFFFF;
		font-size: 13px;
	}

	.card>.cardright {
		float: right;
		margin-right: 10px;
		line-height: 40px;
		color: #FFFFFF;
		font-size: 13px;
		position: absolute;
		right: 26px;
	}

	.card>img {
		width: 15px;
		height: 18px;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.zhankai {
		margin: 0 auto;
		width: 95%;
		height: 50px;
		background-color: #FFFFFF;
		line-height: 50px;
		position: relative;
	}

	.zhankai>.zhankai_left {
		float: left;
		margin-left: 10px;
		color: #000000;
	}

	.zhankai>.zhankai_right {
		float: right;
		margin-right: 10px;
		color: #000000;
	}

	.zhankai>img {
		width: 20px;
		height: 20px;
		float: left;
		margin-left: 10px;
		margin-top: 15px;
	}

	.zhankaibig {
		margin: 0 auto;
		width: 95%;
		height: 70px;
		background-color: #FFFFFF;
		line-height: 50px;
	}

	.zhankaibig>.creditlimit {
		font-size: 10px;
		position: absolute;
		left: 40px;
		bottom: -5px;
		color: #7E7E7E;
	}

	.zhankaibig>.zhankai_right {
		line-height: 70px;
	}
	.jingdianmodel{
		height: 60px;
		
		
	}
	.jingdianmodel>span{
		float: left;
		margin-left: 50px;
		line-height: 60px;
		color: #FFFFFF;
		font-size: 16px;
	}
</style>
